<template>
  <div class="image-upload-component">
    <!-- 上传区域 -->
    <div 
      class="upload-area"
      :class="{ 
        'drag-over': isDragOver, 
        'uploading': isUploading,
        'has-images': uploadedImages.length > 0
      }"
      @drop="handleDrop"
      @dragover="handleDragOver"
      @dragenter="handleDragEnter"
      @dragleave="handleDragLeave"
      @click="triggerFileInput"
    >
      <!-- 拖拽提示 -->
      <div class="upload-prompt" v-if="uploadedImages.length === 0">
        <div class="upload-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <div class="upload-text">
          <h3>上传症状相关图片</h3>
          <p>拖拽图片到此处，或点击选择文件</p>
          <div class="upload-tips">
            <span class="tip-item">
              <i class="fas fa-check"></i>
              支持 JPG、PNG、WebP 格式
            </span>
            <span class="tip-item">
              <i class="fas fa-check"></i>
              单个文件最大 {{ maxSizeText }}
            </span>
            <span class="tip-item">
              <i class="fas fa-check"></i>
              最多上传 {{ maxFiles }} 张图片
            </span>
          </div>
        </div>
      </div>

      <!-- 上传进度 -->
      <div class="upload-progress" v-if="isUploading">
        <div class="progress-content">
          <div class="progress-icon">
            <i class="fas fa-spinner fa-spin"></i>
          </div>
          <div class="progress-text">
            <h4>正在上传图片...</h4>
            <p>{{ uploadProgress }}%</p>
          </div>
          <el-progress 
            :percentage="uploadProgress"
            :stroke-width="6"
            :show-text="false"
            class="progress-bar"
          />
        </div>
      </div>

      <!-- 已上传图片预览 -->
      <div class="uploaded-images" v-if="uploadedImages.length > 0 && !isUploading">
        <div class="images-header">
          <h4>
            <i class="fas fa-images"></i>
            已上传图片 ({{ uploadedImages.length }}/{{ maxFiles }})
          </h4>
          <div class="header-actions">
            <el-button 
              @click.stop="triggerFileInput"
              type="primary"
              size="small"
              :disabled="uploadedImages.length >= maxFiles"
            >
              <i class="fas fa-plus"></i>
              添加更多
            </el-button>
            <el-button 
              @click.stop="clearAllImages"
              type="danger"
              size="small"
              v-if="uploadedImages.length > 0"
            >
              <i class="fas fa-trash"></i>
              清空
            </el-button>
          </div>
        </div>
        
        <div class="images-grid">
          <div 
            v-for="(image, index) in uploadedImages" 
            :key="image.id"
            class="image-item"
          >
            <div class="image-preview">
              <img 
                :src="image.preview" 
                :alt="image.name"
                @click="previewImage(image, index)"
                class="preview-img"
              />
              
              <!-- 图片信息覆盖层 -->
              <div class="image-overlay">
                <div class="overlay-actions">
                  <el-button 
                    @click.stop="previewImage(image, index)"
                    type="primary"
                    size="small"
                    circle
                  >
                    <i class="fas fa-eye"></i>
                  </el-button>
                  <el-button 
                    @click.stop="downloadImage(image)"
                    type="success"
                    size="small"
                    circle
                  >
                    <i class="fas fa-download"></i>
                  </el-button>
                  <el-button 
                    @click.stop="removeImage(index)"
                    type="danger"
                    size="small"
                    circle
                  >
                    <i class="fas fa-trash"></i>
                  </el-button>
                </div>
              </div>
              
              <!-- 压缩状态指示器 -->
              <div class="compression-badge" v-if="image.compressed">
                <i class="fas fa-compress-alt"></i>
                已压缩
              </div>
            </div>
            
            <div class="image-info">
              <div class="image-name" :title="image.name">{{ image.name }}</div>
              <div class="image-meta">
                <span class="file-size">{{ formatFileSize(image.size) }}</span>
                <span class="image-dimensions" v-if="image.width && image.height">
                  {{ image.width }}×{{ image.height }}
                </span>
              </div>
              
              <!-- 图片描述 -->
              <div class="image-description">
                <el-input
                  v-model="image.description"
                  placeholder="添加图片描述..."
                  size="small"
                  maxlength="100"
                  show-word-limit
                  @input="updateImageDescription(index, $event)"
                />
              </div>
              
              <!-- 图片标签 -->
              <div class="image-tags">
                <el-tag 
                  v-for="tag in image.tags" 
                  :key="tag"
                  size="small"
                  closable
                  @close="removeImageTag(index, tag)"
                  class="image-tag"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  v-if="image.showTagInput"
                  v-model="image.newTag"
                  size="small"
                  placeholder="输入标签"
                  @keyup.enter="addImageTag(index)"
                  @blur="addImageTag(index)"
                  class="tag-input"
                />
                <el-button
                  v-else
                  @click="showTagInput(index)"
                  type="text"
                  size="small"
                  class="add-tag-btn"
                >
                  <i class="fas fa-plus"></i>
                  添加标签
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的文件输入 -->
    <input
      ref="fileInput"
      type="file"
      multiple
      accept="image/*"
      @change="handleFileSelect"
      style="display: none"
    />

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      title="图片预览"
      width="80%"
      :before-close="closePreviewDialog"
      class="image-preview-dialog"
    >
      <div class="preview-container" v-if="currentPreviewImage">
        <div class="preview-main">
          <div class="preview-image-wrapper">
            <img 
              :src="currentPreviewImage.preview" 
              :alt="currentPreviewImage.name"
              class="preview-main-image"
              @load="onPreviewImageLoad"
            />
            
            <!-- 图片导航 -->
            <div class="preview-navigation" v-if="uploadedImages.length > 1">
              <el-button 
                @click="previousImage"
                :disabled="currentPreviewIndex === 0"
                type="primary"
                circle
                class="nav-btn prev-btn"
              >
                <i class="fas fa-chevron-left"></i>
              </el-button>
              <el-button 
                @click="nextImage"
                :disabled="currentPreviewIndex === uploadedImages.length - 1"
                type="primary"
                circle
                class="nav-btn next-btn"
              >
                <i class="fas fa-chevron-right"></i>
              </el-button>
            </div>
          </div>
          
          <!-- 缩略图导航 -->
          <div class="preview-thumbnails" v-if="uploadedImages.length > 1">
            <div 
              v-for="(image, index) in uploadedImages" 
              :key="image.id"
              class="thumbnail-item"
              :class="{ active: index === currentPreviewIndex }"
              @click="setCurrentPreviewImage(index)"
            >
              <img :src="image.preview" :alt="image.name" />
            </div>
          </div>
        </div>
        
        <div class="preview-sidebar">
          <div class="preview-info">
            <h4>{{ currentPreviewImage.name }}</h4>
            
            <div class="info-grid">
              <div class="info-item">
                <label>文件大小：</label>
                <span>{{ formatFileSize(currentPreviewImage.size) }}</span>
              </div>
              <div class="info-item" v-if="currentPreviewImage.width">
                <label>图片尺寸：</label>
                <span>{{ currentPreviewImage.width }}×{{ currentPreviewImage.height }}</span>
              </div>
              <div class="info-item">
                <label>上传时间：</label>
                <span>{{ formatDateTime(currentPreviewImage.uploadTime) }}</span>
              </div>
              <div class="info-item" v-if="currentPreviewImage.compressed">
                <label>压缩状态：</label>
                <span class="compressed-status">
                  <i class="fas fa-check-circle"></i>
                  已压缩
                </span>
              </div>
            </div>
            
            <!-- 图片描述编辑 -->
            <div class="description-edit">
              <label>图片描述：</label>
              <el-input
                v-model="currentPreviewImage.description"
                type="textarea"
                :rows="3"
                placeholder="添加图片描述..."
                maxlength="200"
                show-word-limit
                @input="updateCurrentImageDescription"
              />
            </div>
            
            <!-- 标签编辑 -->
            <div class="tags-edit">
              <label>图片标签：</label>
              <div class="tags-container">
                <el-tag 
                  v-for="tag in currentPreviewImage.tags" 
                  :key="tag"
                  closable
                  @close="removeCurrentImageTag(tag)"
                  class="preview-tag"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  v-if="showPreviewTagInput"
                  v-model="newPreviewTag"
                  size="small"
                  placeholder="输入标签"
                  @keyup.enter="addCurrentImageTag"
                  @blur="addCurrentImageTag"
                  class="preview-tag-input"
                />
                <el-button
                  v-else
                  @click="showPreviewTagInput = true"
                  type="text"
                  size="small"
                >
                  <i class="fas fa-plus"></i>
                  添加标签
                </el-button>
              </div>
            </div>
          </div>
          
          <div class="preview-actions">
            <el-button 
              @click="downloadImage(currentPreviewImage)"
              type="primary"
              class="action-btn"
            >
              <i class="fas fa-download"></i>
              下载图片
            </el-button>
            <el-button 
              @click="removeCurrentImage"
              type="danger"
              class="action-btn"
            >
              <i class="fas fa-trash"></i>
              删除图片
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 压缩设置 -->
    <div class="compression-settings" v-if="showCompressionSettings">
      <el-collapse v-model="compressionExpanded">
        <el-collapse-item title="图片压缩设置" name="compression">
          <div class="settings-content">
            <div class="setting-item">
              <label class="setting-label">启用压缩：</label>
              <el-switch 
                v-model="compressionEnabled"
                active-text="开启"
                inactive-text="关闭"
              />
            </div>
            
            <div class="setting-item" v-if="compressionEnabled">
              <label class="setting-label">压缩质量：</label>
              <el-slider 
                v-model="compressionQuality"
                :min="0.1"
                :max="1"
                :step="0.1"
                :format-tooltip="formatQualityTooltip"
                style="width: 200px"
              />
            </div>
            
            <div class="setting-item" v-if="compressionEnabled">
              <label class="setting-label">最大宽度：</label>
              <el-input-number 
                v-model="maxWidth"
                :min="100"
                :max="4000"
                :step="100"
                size="small"
                style="width: 150px"
              />
              <span class="unit-text">px</span>
            </div>
            
            <div class="setting-item" v-if="compressionEnabled">
              <label class="setting-label">最大高度：</label>
              <el-input-number 
                v-model="maxHeight"
                :min="100"
                :max="4000"
                :step="100"
                size="small"
                style="width: 150px"
              />
              <span class="unit-text">px</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { ElButton, ElProgress, ElDialog, ElInput, ElTag, ElCollapse, ElCollapseItem, ElSwitch, ElSlider, ElInputNumber, ElMessage, ElMessageBox } from 'element-plus'

// Props
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  maxFiles: {
    type: Number,
    default: 5
  },
  maxSize: {
    type: Number,
    default: 10 * 1024 * 1024 // 10MB
  },
  acceptedTypes: {
    type: Array,
    default: () => ['image/jpeg', 'image/png', 'image/webp']
  },
  showCompressionSettings: {
    type: Boolean,
    default: true
  },
  autoCompress: {
    type: Boolean,
    default: true
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error', 'image-remove'])

// 响应式数据
const isDragOver = ref(false)
const isUploading = ref(false)
const uploadProgress = ref(0)
const uploadedImages = ref([])
const fileInput = ref(null)

// 预览相关
const previewDialogVisible = ref(false)
const currentPreviewImage = ref(null)
const currentPreviewIndex = ref(0)
const showPreviewTagInput = ref(false)
const newPreviewTag = ref('')

// 压缩设置
const compressionExpanded = ref([])
const compressionEnabled = ref(true)
const compressionQuality = ref(0.8)
const maxWidth = ref(1920)
const maxHeight = ref(1080)

// 计算属性
const maxSizeText = computed(() => {
  const mb = props.maxSize / (1024 * 1024)
  return mb >= 1 ? `${mb}MB` : `${Math.round(props.maxSize / 1024)}KB`
})

// 方法
const triggerFileInput = () => {
  if (uploadedImages.value.length >= props.maxFiles) {
    ElMessage.warning(`最多只能上传 ${props.maxFiles} 张图片`)
    return
  }
  fileInput.value?.click()
}

const handleDragOver = (e) => {
  e.preventDefault()
  isDragOver.value = true
}

const handleDragEnter = (e) => {
  e.preventDefault()
  isDragOver.value = true
}

const handleDragLeave = (e) => {
  e.preventDefault()
  if (!e.currentTarget.contains(e.relatedTarget)) {
    isDragOver.value = false
  }
}

const handleDrop = (e) => {
  e.preventDefault()
  isDragOver.value = false
  
  const files = Array.from(e.dataTransfer.files)
  processFiles(files)
}

const handleFileSelect = (e) => {
  const files = Array.from(e.target.files)
  processFiles(files)
  
  // 清空文件输入
  e.target.value = ''
}

const processFiles = async (files) => {
  // 过滤有效的图片文件
  const validFiles = files.filter(file => {
    if (!props.acceptedTypes.includes(file.type)) {
      ElMessage.error(`不支持的文件格式：${file.name}`)
      return false
    }
    
    if (file.size > props.maxSize) {
      ElMessage.error(`文件过大：${file.name}，最大支持 ${maxSizeText.value}`)
      return false
    }
    
    return true
  })
  
  if (validFiles.length === 0) return
  
  // 检查数量限制
  const remainingSlots = props.maxFiles - uploadedImages.value.length
  if (validFiles.length > remainingSlots) {
    ElMessage.warning(`只能再上传 ${remainingSlots} 张图片`)
    validFiles.splice(remainingSlots)
  }
  
  // 开始上传
  isUploading.value = true
  uploadProgress.value = 0
  
  try {
    for (let i = 0; i < validFiles.length; i++) {
      const file = validFiles[i]
      await processSingleFile(file)
      uploadProgress.value = Math.round(((i + 1) / validFiles.length) * 100)
    }
    
    ElMessage.success(`成功上传 ${validFiles.length} 张图片`)
    emit('upload-success', validFiles)
  } catch (error) {
    console.error('Upload failed:', error)
    ElMessage.error('上传失败，请重试')
    emit('upload-error', error)
  } finally {
    isUploading.value = false
    uploadProgress.value = 0
  }
}

const processS ingleFile = async (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    
    reader.onload = async (e) => {
      try {
        const img = new Image()
        
        img.onload = async () => {
          let processedFile = file
          let preview = e.target.result
          let compressed = false
          
          // 压缩处理
          if (compressionEnabled.value && props.autoCompress) {
            const compressionResult = await compressImage(img, file)
            if (compressionResult) {
              processedFile = compressionResult.file
              preview = compressionResult.preview
              compressed = true
            }
          }
          
          // 创建图片对象
          const imageObj = {
            id: Date.now() + Math.random(),
            name: file.name,
            size: processedFile.size,
            type: processedFile.type,
            preview: preview,
            file: processedFile,
            width: img.width,
            height: img.height,
            compressed: compressed,
            description: '',
            tags: [],
            uploadTime: new Date(),
            showTagInput: false,
            newTag: ''
          }
          
          uploadedImages.value.push(imageObj)
          updateModelValue()
          resolve(imageObj)
        }
        
        img.onerror = () => {
          reject(new Error('图片加载失败'))
        }
        
        img.src = e.target.result
      } catch (error) {
        reject(error)
      }
    }
    
    reader.onerror = () => {
      reject(new Error('文件读取失败'))
    }
    
    reader.readAsDataURL(file)
  })
}

const compressImage = async (img, file) => {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    
    // 计算压缩后的尺寸
    let { width, height } = img
    
    if (width > maxWidth.value) {
      height = (height * maxWidth.value) / width
      width = maxWidth.value
    }
    
    if (height > maxHeight.value) {
      width = (width * maxHeight.value) / height
      height = maxHeight.value
    }
    
    canvas.width = width
    canvas.height = height
    
    // 绘制压缩后的图片
    ctx.drawImage(img, 0, 0, width, height)
    
    // 转换为 Blob
    canvas.toBlob((blob) => {
      if (blob && blob.size < file.size) {
        // 压缩成功
        const compressedFile = new File([blob], file.name, {
          type: file.type,
          lastModified: Date.now()
        })
        
        const preview = canvas.toDataURL(file.type, compressionQuality.value)
        
        resolve({
          file: compressedFile,
          preview: preview
        })
      } else {
        // 压缩失败或文件更大，使用原文件
        resolve(null)
      }
    }, file.type, compressionQuality.value)
  })
}

const removeImage = async (index) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这张图片吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const removedImage = uploadedImages.value.splice(index, 1)[0]
    updateModelValue()
    emit('image-remove', removedImage)
    ElMessage.success('图片已删除')
  } catch {
    // 用户取消
  }
}

const clearAllImages = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要清空所有 ${uploadedImages.value.length} 张图片吗？`,
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    uploadedImages.value = []
    updateModelValue()
    ElMessage.success('所有图片已清空')
  } catch {
    // 用户取消
  }
}

const previewImage = (image, index) => {
  currentPreviewImage.value = image
  currentPreviewIndex.value = index
  previewDialogVisible.value = true
}

const closePreviewDialog = () => {
  previewDialogVisible.value = false
  currentPreviewImage.value = null
  showPreviewTagInput.value = false
  newPreviewTag.value = ''
}

const previousImage = () => {
  if (currentPreviewIndex.value > 0) {
    currentPreviewIndex.value--
    currentPreviewImage.value = uploadedImages.value[currentPreviewIndex.value]
  }
}

const nextImage = () => {
  if (currentPreviewIndex.value < uploadedImages.value.length - 1) {
    currentPreviewIndex.value++
    currentPreviewImage.value = uploadedImages.value[currentPreviewIndex.value]
  }
}

const setCurrentPreviewImage = (index) => {
  currentPreviewIndex.value = index
  currentPreviewImage.value = uploadedImages.value[index]
}

const downloadImage = (image) => {
  const link = document.createElement('a')
  link.href = image.preview
  link.download = image.name
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success('图片下载已开始')
}

const updateImageDescription = (index, description) => {
  uploadedImages.value[index].description = description
  updateModelValue()
}

const updateCurrentImageDescription = () => {
  const index = currentPreviewIndex.value
  uploadedImages.value[index].description = currentPreviewImage.value.description
  updateModelValue()
}

const showTagInput = (index) => {
  uploadedImages.value[index].showTagInput = true
  nextTick(() => {
    // 聚焦到输入框
    const input = document.querySelector(`.image-item:nth-child(${index + 1}) .tag-input input`)
    if (input) input.focus()
  })
}

const addImageTag = (index) => {
  const image = uploadedImages.value[index]
  const tag = image.newTag.trim()
  
  if (tag && !image.tags.includes(tag)) {
    image.tags.push(tag)
    updateModelValue()
  }
  
  image.newTag = ''
  image.showTagInput = false
}

const removeImageTag = (index, tag) => {
  const image = uploadedImages.value[index]
  const tagIndex = image.tags.indexOf(tag)
  if (tagIndex > -1) {
    image.tags.splice(tagIndex, 1)
    updateModelValue()
  }
}

const addCurrentImageTag = () => {
  const tag = newPreviewTag.value.trim()
  
  if (tag && !currentPreviewImage.value.tags.includes(tag)) {
    currentPreviewImage.value.tags.push(tag)
    const index = currentPreviewIndex.value
    uploadedImages.value[index].tags = currentPreviewImage.value.tags
    updateModelValue()
  }
  
  newPreviewTag.value = ''
  showPreviewTagInput.value = false
}

const removeCurrentImageTag = (tag) => {
  const tagIndex = currentPreviewImage.value.tags.indexOf(tag)
  if (tagIndex > -1) {
    currentPreviewImage.value.tags.splice(tagIndex, 1)
    const index = currentPreviewIndex.value
    uploadedImages.value[index].tags = currentPreviewImage.value.tags
    updateModelValue()
  }
}

const removeCurrentImage = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要删除当前图片吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = currentPreviewIndex.value
    const removedImage = uploadedImages.value.splice(index, 1)[0]
    
    // 调整预览索引
    if (uploadedImages.value.length === 0) {
      closePreviewDialog()
    } else {
      if (currentPreviewIndex.value >= uploadedImages.value.length) {
        currentPreviewIndex.value = uploadedImages.value.length - 1
      }
      currentPreviewImage.value = uploadedImages.value[currentPreviewIndex.value]
    }
    
    updateModelValue()
    emit('image-remove', removedImage)
    ElMessage.success('图片已删除')
  } catch {
    // 用户取消
  }
}

const updateModelValue = () => {
  emit('update:modelValue', uploadedImages.value)
}

const onPreviewImageLoad = () => {
  // 图片加载完成后的处理
}

// 工具函数
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDateTime = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatQualityTooltip = (value) => {
  return `${Math.round(value * 100)}%`
}

// 监听 modelValue 变化
watch(() => props.modelValue, (newValue) => {
  if (newValue && newValue !== uploadedImages.value) {
    uploadedImages.value = newValue
  }
}, { immediate: true })
</script>

<style scoped>
.image-upload-component {
  width: 100%;
}

.upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  background: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  border-color: #2c5aa0;
  background: #f0f7ff;
}

.upload-area.drag-over {
  border-color: #2c5aa0;
  background: #e6f7ff;
  transform: scale(1.02);
}

.upload-area.uploading {
  border-color: #faad14;
  background: #fffbe6;
}

.upload-area.has-images {
  padding: 20px;
  min-height: auto;
  cursor: default;
}

.upload-area.has-images:hover {
  border-color: #d9d9d9;
  background: #fafafa;
  transform: none;
}

.upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.upload-icon {
  font-size: 48px;
  color: #2c5aa0;
}

.upload-text h3 {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.upload-text p {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px 0;
}

.upload-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52c41a;
  font-size: 13px;
}

.upload-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 300px;
}

.progress-icon {
  font-size: 32px;
  color: #faad14;
}

.progress-text h4 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.progress-text p {
  color: #666;
  font-size: 14px;
  margin: 5px 0 0 0;
}

.progress-bar {
  width: 100%;
}

.uploaded-images {
  width: 100%;
}

.images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.images-header h4 {
  color: #2c5aa0;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.image-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.image-preview {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.preview-img:hover {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview:hover .image-overlay {
  opacity: 1;
}

.overlay-actions {
  display: flex;
  gap: 10px;
}

.compression-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #52c41a;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.image-info {
  padding: 15px;
}

.image-name {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
  margin-bottom: 12px;
}

.image-description {
  margin-bottom: 12px;
}

.image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.image-tag {
  margin: 0;
}

.tag-input {
  width: 80px;
}

.add-tag-btn {
  color: #2c5aa0;
  font-size: 12px;
  padding: 0;
  height: auto;
}

/* 预览对话框样式 */
.image-preview-dialog {
  --el-dialog-padding-primary: 0;
}

.preview-container {
  display: flex;
  height: 70vh;
  min-height: 500px;
}

.preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.preview-image-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.preview-main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.preview-navigation {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.nav-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
}

.preview-thumbnails {
  display: flex;
  gap: 8px;
  padding: 15px 20px;
  background: white;
  border-top: 1px solid #f0f0f0;
  overflow-x: auto;
}

.thumbnail-item {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.thumbnail-item.active {
  border-color: #2c5aa0;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-sidebar {
  width: 320px;
  background: white;
  border-left: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}

.preview-info {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.preview-info h4 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
  word-break: break-all;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item label {
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

.info-item span {
  color: #333;
  font-size: 13px;
}

.compressed-status {
  color: #52c41a;
  display: flex;
  align-items: center;
  gap: 4px;
}

.description-edit,
.tags-edit {
  margin-bottom: 20px;
}

.description-edit label,
.tags-edit label {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.preview-tag {
  margin: 0;
}

.preview-tag-input {
  width: 80px;
}

.preview-actions {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  width: 100%;
}

/* 压缩设置样式 */
.compression-settings {
  margin-top: 20px;
}

.settings-content {
  padding: 15px 0;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.setting-label {
  min-width: 80px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.unit-text {
  color: #666;
  font-size: 13px;
  margin-left: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .upload-area {
    padding: 30px 15px;
  }
  
  .upload-prompt {
    gap: 15px;
  }
  
  .upload-icon {
    font-size: 36px;
  }
  
  .upload-text h3 {
    font-size: 16px;
  }
  
  .upload-tips {
    align-items: center;
  }
  
  .images-grid {
    grid-template-columns: 1fr;
  }
  
  .images-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .preview-container {
    flex-direction: column;
    height: auto;
  }
  
  .preview-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid #f0f0f0;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .setting-label {
    min-width: auto;
  }
}
</style>